<clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
    <clr-dg-action-bar>
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-secondary" (click)="onCreate()">
                <clr-icon shape="plus" size="16"></clr-icon>
                {{"APP_ADD"|translate}}
            </button>
            <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()" [disabled]="selected.length<1">
                <clr-icon shape="close"></clr-icon>
                {{"APP_DELETE"|translate}}
            </button>
        </div>
        <button type="button" class="btn btn-sm btn-secondary" (click)="sync()">
            <clr-icon shape="sync"></clr-icon>
            {{"APP_SYNC"|translate}}
        </button>
    </clr-dg-action-bar>
    <clr-dg-column>{{'APP_IP'|translate}}</clr-dg-column>
    <clr-dg-column>{{'APP_NETWORK_GATEWAY'|translate}}</clr-dg-column>
    <clr-dg-column>{{'APP_NETWORK_DNS1'|translate}}</clr-dg-column>
    <clr-dg-column>{{'APP_NETWORK_DNS2'|translate}}</clr-dg-column>
    <clr-dg-column>{{'APP_STATUS'|translate}}</clr-dg-column>
    <clr-dg-column>{{'APP_OPERATION'|translate}}</clr-dg-column>
    <clr-dg-row *ngFor="let item of items" [clrDgItem]="item">
        <clr-dg-cell>{{item.address}}</clr-dg-cell>
        <clr-dg-cell>{{item.gateway}}</clr-dg-cell>
        <clr-dg-cell>{{item.dns1}}</clr-dg-cell>
        <clr-dg-cell>{{item.dns2}}</clr-dg-cell>
        <clr-dg-cell>{{item.status | translate}}</clr-dg-cell>
        <clr-dg-cell>
            <span class="color-square" *ngIf="item.status === 'IP_AVAILABLE'" (click)="update(item,'LOCK')">
                <clr-icon shape="lock"></clr-icon>
            </span>
            <span class="color-square" *ngIf="item.status !== 'IP_AVAILABLE'" (click)="update(item,'UNLOCK')">
                 <clr-icon shape="unlock"></clr-icon>
            </span>
        </clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>
        <clr-dg-pagination #pagination [(clrDgPage)]="page" [clrDgPageSize]="size" [clrDgTotalItems]="total"
                           (clrDgPageChange)="refresh()">
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
            {{"APP_PAGER_TOTAL"|translate}} {{pagination.totalItems}} {{"APP_IP"|translate}}
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>